<template>
  <view v-if="open" class="popupView" :open="open" :title="title" :phone="phone" :btn-cont="btnCont">
    <view class="codeBox">
      <view class="titView">{{ title }}</view>
      <view class="phoneView">{{ phone }}</view>
      <view class="inputView">
        <input v-model="smsCode" class="codeIpt" type="number" maxlength="6" placeholder="输入验证码" style="font-size:24rpx;" />
        <view class="codeBtn" @click="getCode(relfState)">{{ codeBtn }}</view>
      </view>
      <view class="btnCont">
        <view :class="[testCode ? 'onActive' : 'smsbtn']" @click="engitBtn(smsCode)">{{ btnCont }}</view>
      </view>
    </view>
    <view class="modulBg" @click="closeModul"></view>
  </view>
</template>
<script>
export default {
  props: {
    open: {
      type: Boolean,
      default: false
    },
    phone: {
      type: String,
      default: ''
    },
    btnCont: {
      type: String,
      default: '确认提现'
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      smsCode: '',
      codeBtn: '获取验证码',
      relfState: true,
      time: 60,
      testCode: false
    }
  },
  watch: {
    smsCode(val) {
      const num = /^\d{6}$/
      this.testCode = num.test(val)
    }
  },
  methods: {
    engitBtn(code) {
      if (code) {
        this.$emit('engitBtn', code)
      } else {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
          duration: 3 * 1000
        })
      }
    },
    closeModul() {
      this.$emit('closeModul')
    },
    codeFn() {
      this.relfState = false
      var clock = setInterval(() => {
        this.time--
        this.codeBtn = `重新获取(${this.time})`
        if (this.time === 0) {
          clearInterval(clock)
          this.codeBtn = '获取验证码'
          this.relfState = true
          this.time = 60
        }
      }, 1000)
    },
    async getCode(state) {
      if (state) {
        const res = await this.$api.commissionApi.getAlipySms({
          regionCode: '+86'
        })
        if (res.code === 0) {
          uni.showToast({
            title: '短信发送成功，请注意查收！',
            icon: 'none',
            duration: 3 * 1000
          })
          this.codeFn()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .popupView {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 888;
    .codeBox {
      width: 80%;
      background: #fff;
      border-radius: 20rpx;
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      .titView {
        color: #333;
        font-weight: bold;
        text-align: center;
        padding: 10rpx 0;
      }
      .phoneView {
        color: #333;
        padding: 10rpx 0;
        width: 90%;
        font-weight: 500;
        margin: 0 auto;
      }
      .inputView {
        display: flex;
        width: 90%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: 1rpx solid #eee;
        border-radius: 30rpx;
        margin: 20rpx auto;
        padding: 10rpx 0;
        .codeBtn {
          border-left: 1rpx solid #eee;
          padding-left: 20rpx;
          color: #6C95E9;
          min-width: 80px;
          text-align: center;
          white-space: nowrap;
          font-size: 24rpx;
        }
      }
      .btnCont {
        border-top: 1rpx solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;
        font-weight: bold;
        color: #999;
      }
    }
    .modulBg {
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.6);
      z-index: 900;
      position: fixed;
      left: 0;
      top: 0;
    }
  }
  .onActive {
    color: #6C95E9;
  }
</style>
